import '../../css/detail.scss';

//router
import { Link } from 'react-router';

//redux
import { bindActionCreators } from 'redux';

import { connect , Provider } from 'react-redux';

import action from '../../redux/action/detailAction';

import store from '../../redux/store/detailStore';

//三方组件
import iScroll from 'iscroll/build/iscroll-probe';

import ReactIScroll from 'react-iscroll';

const Detail = React.createClass({
    getInitialState(){
        return {
            pageHeight:0,
            pageShow:"",
        }
    },
    getDefaultProps: function() {
        return ({
            iscrollOptions: {
                mouseWheel: true,
                //scrollbars: true,
                probeType:3
            }
        });
    },
    componentDidMount(){
        this.getData();
        this.init();
    },
    getData(){
        const router = this.router();
        const id = router.params.id;
        console.log(id)
    },
    init(){
        const self   = this;
        const height = window.innerHeight;
        this.setState({pageHeight:height});
        setTimeout(()=>{
            self.setState({
                pageShow:"page-show"
            });
        });

    },
    router:function(){
       return this.props.router;
    },
    actions(){
       return this.props.actions;
    },
    todo(){
       return this.props.todo;
    },
    render(){
        return(
            <div className={classname("detail-page",this.state.pageShow)} style={{height:this.state.pageHeight + 'px'}}>
               <div className="detail">{this.todo().text}</div>
            </div>
        )
    }
});

const IndexComp = connect(
    (state) => {
        return {
            //通过this.props.todos访问
            todo: state.todo
        }
    },
    (dispatch) => {
        return {
            //通过this.props.actions访问
            actions: bindActionCreators(action, dispatch)
        }
    }
)(Detail);

module.exports = React.createClass({
    render: function () {
        return (
            <Provider store={store()}>
                <IndexComp router={this.props} />
            </Provider>
        )
    }
});